function windowsresize(myChart) {
    window.addEventListener("resize", function () {
        myChart.resize();
        console.log("监控窗口变化，实现图形自适应窗口大小");
    });
}


//柱状图模块1
(function (){
    //实例化对象
    var myChart_bar1 = echarts.init(document.querySelector(".bar .chart"));
    //指定配置项数据
    // 2.指定配置项和数据
    option_one = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'  // shadow: 阴影指示器， line:直线指示器，cross：十字指示器
            },
            // 定义tooltip鼠标放上去后的提示显示效果
            formatter: function (params) {
                return '<div>'+ params[0].name +'行业<br>' + '发布' + '<span style="color: #00BFFF;">'+params[0].value + '</span>个招聘需求'+'</div>';
            }
        },
        xAxis: {
            type: 'category',
            data: ['大数据', 'Java开发', 'linux', 'MySQL', 'python开发', 'hive', 'Spark'],
            // 修改刻度标签 相关样式
            axisLabel: {
                color: "rgba(255,255,255,.6) ",
                fontSize: "12",
                show: true,
                interval: 0,  // X轴label显示全
                formatter: function (params) {
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 3;
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber){
                        for (var p = 0;p < rowNumber; p++){
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1 ){
                                tempStr = params.substring(start, paramsNameNumber);
                            } else{
                                tempStr = params.substring(start, end) + "\n"
                            }
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName;
                }

            },
            // 不顯示x坐標軸
            axisLine: {
                show: false
            },
        },


        yAxis: {
            type: 'value',
            // 修改刻度标签 相关样式
            axisLabel: {
                color: "rgba(255,255,255,.6) ",
                fontSize: 12,
            },
            // y轴的线条改为了 2像素
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 2,
                },
            },
            // y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                }
            }
        },
        series: [
            {
                data: [47379, 22248, 22337, 22581, 16967, 5623, 6521],
                type: 'bar',
                name: 'Direct',
                barWidth: '35%',
                itemStyle: {
                    // 修改柱子圆角,可以修改不同大小值，看圆角效果
                    barBorderRadius: 5,
                },
            },
        ],
        color: ["#2f89cf"],
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
    };


    // 指定配置项给实例对象
    myChart_bar1.setOption(option_one)
    //让图像随窗口缩放
    windowsresize(myChart_bar1)
})();

// 条形图【柱状图2】
(function (){
    // 1. 实例化对象
    var myChart_bar2 = echarts.init(document.querySelector(".bar2 .chart"));
    //声明颜色数组
    var myColor =["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];
    // 2. 指定配置和数据
    option_two = {
        grid: {
            top:'10%',
            left: '22%',
            bottom: '10',
        },
        xAxis: {
            show: false,
        },
        yAxis: [{
            type: 'category',
            // 数据翻转
            inverse: true,
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
            //不显示Y轴的线
            axisLine:{

                show:false,
            },
            //不显示刻度
            axisTick:{
                show:false,
            },
            //把刻度标签里面的文字颜色设置为白色
            axisLabel:{
                color:"#fff"
            },
        },{
            show:true,

            data:[19325, 23438, 31000, 121594, 134141, 681807],
            // 数据翻转
            inverse:true,
            //不显示Y轴的线
            axisLine:{

                show:false,
            },
            //不显示刻度
            axisTick:{
                show:false,
            },
            //把刻度标签里面的文字颜色设置为白色
            axisLabel:{
                color:"#fff",
                fontSize:12,
            },
        }
        ],
        series: [
            {
                name: '框',
                type: 'bar',
                barCategoryGap:50,
                BarWidth: 15,
                data: [100,100,100,100,100,100],
                //给series第二个对象里面添加
                yAxisIndex:1,
                itemStyle:{
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 18,
                    barBorderRadius: 15,
                },


            },
            {
                name: '条',
                type: 'bar',
                barCategoryGap: 50,
                BarWidth:15,
                data: [94.19, 100.21, 93.65, 86.33, 98.21, 92.44],
                //给series第一个对象里面添加
                yAxisIndex: 0,
                //修改第一组柱子的圆角
                itemStyle:{
                    barBorderRadius: 20,
                    color: function (params) {
                        console.log(params);
                        return myColor[params.dataIndex];
                    },
                },
                //柱子之间的距离
                barCategoryGap:50,
                //显示柱子内的文字
                barWidth:10,
                label:{
                    show:true,
                    position:"inside",
                    //{c}会自动的解析为 数据 data里面的数据
                    formatter:"{c}%"
                }
            },
        ]

    }
    //让图像随窗口缩放
    windowsresize(myChart_bar2)
// 3. 把配置给实例对象
    myChart_bar2.setOption(option_two)
})();


(function (){
    // 1. 实例化对象
    var myChart_bar3 = echarts.init(document.querySelector(".line .chart"));
    // 2. 指定配置和数据
    var option_three = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            // 这个10% 必须加引号
            right: '10%' // 距离右边10%
        },

        // 设置网格样式
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },
        },


        yAxis: {
            type: 'value',
            axisTick: {
                show: false // 去除刻度
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
        },

        series: [
            {
                name: 'Email',
                type: 'line',

                data: [120, 132, 101, 134, 90, 230, 210],
                smooth: true,
            },
            {
                name: 'Search Engine',
                type: 'line',

                data: [820, 932, 901, 934, 1290, 1330, 1320],
                smooth: true,
            }
        ]
    };

    //让图像随窗口缩放
    windowsresize(myChart_bar3)
// 3. 把配置给实例对象
    myChart_bar3.setOption(option_three)
})();
// 饼形图1
(function() {
// 1. 实例化对象
    var myChart_bar5 = echarts.init(document.querySelector(".pie .chart"));

// 2.指定配置
    var option_5 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };


// 3. 把配置给实例对象
    myChart_bar5.setOption(option_5);
})();
